<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>Title</title>
    <style type="text/css">
        .hide {
            display: none;
        }

        li {
            list-style: none;
            display: inline-block;
            background-color: #90EE90;
        }

        .tapActiveLi {
            background-color: #FF7F50;
        }

        div {
            border: 1px solid #f00;
        }

        .aTapWrap {
            border: none;
        }
    </style>
</head>
<body>
<div class="zsContWrap">
    <!--横向菜单-->
    <ul class="zsContMenu clearfix">
        <li class="on"><a href="javascript:;">标签1</a></li>
        <li><a href="javascript:;">标签2</a></li>
    </ul>
    <!--切换内容-->
    <div class="zsCont">
        <!--标签1 对应展示 内容-->
        <div>
1111111111111111
        </div>
        <!--标签2 对应展示内容-->
        <div class="hide">
            22222222222222
        </div>
    </div>
</div>

<script src="jquery.js"></script>
<script>
    function tab(menus, conts) {
        $(menus).click(function () {
            var index = $(this).index();
            $(this).addClass("on").siblings().removeClass("on");
            $(conts).eq(index).removeClass("hide").siblings().addClass("hide");
        })
    }
    tab(".zsContMenu li", ".zsCont div")
</script>
</body>
</html>